import React, { useState } from 'react';
import './TelemetryDisplay.css';

const TelemetryDisplay = ({ flightState, isVisible = true }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  if (!isVisible || !flightState) return null;

  const { telemetry, isFlying, autopilot, currentMission, missionProgress } = flightState;

  const formatValue = (value, decimals = 1) => {
    return typeof value === 'number' ? value.toFixed(decimals) : value;
  };

  const getStatusColor = (value, thresholds) => {
    if (value >= thresholds.good) return '#4CAF50';
    if (value >= thresholds.warning) return '#FF9800';
    return '#F44336';
  };

  const batteryColor = getStatusColor(telemetry.battery, { good: 50, warning: 20 });
  const signalColor = getStatusColor(telemetry.gpsSignal, { good: 80, warning: 50 });

  return (
    <div className={`telemetry-display ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="telemetry-header" onClick={() => setIsCollapsed(!isCollapsed)}>
        <h3>🛰️ Flight Telemetry</h3>
        <div className="header-controls">
          <div className={`status-indicator ${isFlying ? 'flying' : 'grounded'}`}>
            {isFlying ? '✈️ FLYING' : '🛬 GROUNDED'}
          </div>
          <span className={`collapse-arrow ${isCollapsed ? 'collapsed' : ''}`}>▼</span>
        </div>
      </div>

      {!isCollapsed && (
        <div className="telemetry-content">

      {/* Primary Flight Data */}
      <div className="telemetry-section">
        <h4>Flight Data</h4>
        <div className="telemetry-grid">
          <div className="telemetry-item">
            <span className="label">Altitude:</span>
            <span className="value">{formatValue(telemetry.altitude)} m</span>
          </div>
          <div className="telemetry-item">
            <span className="label">Speed:</span>
            <span className="value">{formatValue(telemetry.speed)} m/s</span>
          </div>
          <div className="telemetry-item">
            <span className="label">Heading:</span>
            <span className="value">{formatValue(telemetry.heading, 0)}°</span>
          </div>
          <div className="telemetry-item">
            <span className="label">Pitch:</span>
            <span className="value">{formatValue(telemetry.pitch)}°</span>
          </div>
          <div className="telemetry-item">
            <span className="label">Roll:</span>
            <span className="value">{formatValue(telemetry.roll)}°</span>
          </div>
          <div className="telemetry-item">
            <span className="label">Temperature:</span>
            <span className="value">{formatValue(telemetry.temperature, 0)}°C</span>
          </div>
        </div>
      </div>

      {/* System Status */}
      <div className="telemetry-section">
        <h4>System Status</h4>
        <div className="status-bars">
          <div className="status-bar">
            <span className="status-label">Battery</span>
            <div className="progress-bar">
              <div
                className="progress-fill"
                style={{
                  width: `${telemetry.battery}%`,
                  backgroundColor: batteryColor
                }}
              ></div>
            </div>
            <span className="status-value" style={{ color: batteryColor }}>
              {formatValue(telemetry.battery, 0)}%
            </span>
          </div>

          <div className="status-bar">
            <span className="status-label">GPS Signal</span>
            <div className="progress-bar">
              <div
                className="progress-fill"
                style={{
                  width: `${telemetry.gpsSignal}%`,
                  backgroundColor: signalColor
                }}
              ></div>
            </div>
            <span className="status-value" style={{ color: signalColor }}>
              {formatValue(telemetry.gpsSignal, 0)}%
            </span>
          </div>
        </div>
      </div>

      {/* Flight Mode */}
      <div className="telemetry-section">
        <h4>Flight Mode</h4>
        <div className="flight-mode">
          <div className={`mode-indicator ${autopilot ? 'active' : ''}`}>
            🤖 Autopilot: {autopilot ? 'ON' : 'OFF'}
          </div>
          <div className={`mode-indicator ${!autopilot && isFlying ? 'active' : ''}`}>
            🎮 Manual: {!autopilot && isFlying ? 'ON' : 'OFF'}
          </div>
        </div>
      </div>

      {/* Mission Status */}
      {currentMission && (
        <div className="telemetry-section">
          <h4>Mission Status</h4>
          <div className="mission-info">
            <div className="mission-name">{currentMission.name}</div>
            <div className="mission-progress">
              <span>Progress:</span>
              <div className="progress-bar">
                <div
                  className="progress-fill mission-progress-fill"
                  style={{ width: `${(missionProgress / currentMission.waypoints.length) * 100}%` }}
                ></div>
              </div>
              <span>{Math.round((missionProgress / currentMission.waypoints.length) * 100)}%</span>
            </div>
            <div className="mission-waypoint">
              Waypoint: {Math.floor(missionProgress) + 1} / {currentMission.waypoints.length}
            </div>
          </div>
        </div>
      )}

      {/* Compass */}
      <div className="telemetry-section">
        <h4>Compass</h4>
        <div className="compass">
          <div className="compass-circle">
            <div
              className="compass-needle"
              style={{ transform: `rotate(${telemetry.heading}deg)` }}
            ></div>
            <div className="compass-directions">
              <span className="compass-n">N</span>
              <span className="compass-e">E</span>
              <span className="compass-s">S</span>
              <span className="compass-w">W</span>
            </div>
          </div>
        </div>
      </div>

      {/* Attitude Indicator */}
      <div className="telemetry-section">
        <h4>Attitude</h4>
        <div className="attitude-indicator">
          <div className="horizon">
            <div
              className="horizon-line"
              style={{
                transform: `rotate(${-telemetry.roll}deg) translateY(${telemetry.pitch * 2}px)`
              }}
            ></div>
            <div className="aircraft-symbol">✈</div>
          </div>
        </div>
      </div>
        </div>
      )}
    </div>
  );
};

export default TelemetryDisplay;
